<include file="Public:head" />
<link type="text/css" rel="stylesheet" href="__PUBLIC__/js/style/validator.css"></link>
<script src="__PUBLIC__/js/formValidator.js" type="text/javascript" charset="UTF-8"></script>
<script src="__PUBLIC__/js/formValidatorRegex.js" type="text/javascript" charset="UTF-8"></script>
<style type="text/css">
.reg{border:none; text-align:center;}
.reg .title{ font-size:131%; color:#333333; margin:0; font-weight:bold;}
.reg .form{width:500px;margin:0 auto;*margin:auto;}
.reg .form label{width:100px; text-align:right; display:inline-block;}
.reg .form br{clear:both;}
.reg .form .right{display:inline-block; text-align:left;}
.reg .form .w200{width:370px;}
.reg .form .right .w88{width:10.5em; float:left;}
</style>
<div id="main" style="background-color:#ffffff;" class="reg">
	<form action="__URL__/reg_add" method="post">
	<p class="title">Register with Beingfunchina to get yourself connected now! If you are already a member,please log in directly.</p>
<table align="center" class="form">
	<tr><td>
	<fieldset>
		<legend>Select an Username and password</legend>
		<table width="100%" border="0">
			<tr><td>
			<label for="username">User name:</label>
			</td>
			<td>
			<div  class="right w200">
			<input type="text" name="username" id="username" />
			</div>
			</td>
		</tr><tr></tr>
		<tr><td>
			<label for="password">Password:</label>
			</td><td>
			<div  class="right w200">
			<input type="password" name="password" id="password" />
			</div>
			</td>
		</tr><tr></tr>
		<tr><td>
			<label for="repassword">Retype Password:</label>
			</td><td>
			<div  class="right w200">
			<input type="password" name="repassword" id="repassword" />
			</div>
		</td>
		</tr><tr></tr>
		<tr><td>
			<label for="email">E-mail:</label>
			</td><td>
			<div  class="right w200">
			<input type="text" name="email" id="email" />
			</div>
		</td>
		</tr>
		</table>
	</fieldset>
	<fieldset>
		<legend>Just one step to share more about yourself with your friends on Beingfunchina</legend>
		<table width="100%" border="0">
		<tr><th>
			<label for="first_name">Name:</label>
		</th><td>
			<div  class="right w200">
			<input type="text" name="first_name" id="first_name" value="First name" class="w88"/>
			<input type="text" name="last_name" id="last_name" value="Last name" class="w88" />
			</div>
		</td>
		</tr><tr></tr>
		<tr><th>
			<label for="gender">Gender:</label>
		</th><td>
			<div  class="right w200">
			<select id="gender" name="gender">
				<option selected="selected" value="0">hidden</option>
				<option value="1">Male</option>
				<option value="2">Female</option>
			</select>
			</div>
		</td>
		</tr><tr></tr>
		<tr><th>
			<label for="birthyear">Birthday:</label>
		</th><td>
			<div  class="right w200">
              <select onchange="showbirthday();" name="bdayyear" id="birthyear">
                <option value="">Year</option>
                <option value="2010">2010</option>
                <option value="2009">2009</option>
                <option value="2008">2008</option>
                <option value="2007">2007</option>
                <option value="2006">2006</option>
                <option value="2005">2005</option>
                <option value="2004">2004</option>
                <option value="2003">2003</option>
                <option value="2002">2002</option>
                <option value="2001">2001</option>
                <option value="2000">2000</option>
                <option value="1999">1999</option>
                <option value="1998">1998</option>
                <option value="1997">1997</option>
                <option value="1996">1996</option>
                <option value="1995">1995</option>
                <option value="1994">1994</option>
                <option value="1993">1993</option>
                <option value="1992">1992</option>
                <option value="1991">1991</option>
                <option value="1990">1990</option>
                <option value="1989">1989</option>
                <option value="1988">1988</option>
                <option value="1987">1987</option>
                <option value="1986">1986</option>
                <option value="1985">1985</option>
                <option value="1984">1984</option>
                <option value="1983">1983</option>
                <option value="1982">1982</option>
                <option value="1981">1981</option>
                <option value="1980">1980</option>
                <option value="1979">1979</option>
                <option value="1978">1978</option>
                <option value="1977">1977</option>
                <option value="1976">1976</option>
                <option value="1975">1975</option>
                <option value="1974">1974</option>
                <option value="1973">1973</option>
                <option value="1972">1972</option>
                <option value="1971">1971</option>
                <option value="1970">1970</option>
                <option value="1969">1969</option>
                <option value="1968">1968</option>
                <option value="1967">1967</option>
                <option value="1966">1966</option>
                <option value="1965">1965</option>
                <option value="1964">1964</option>
                <option value="1963">1963</option>
                <option value="1962">1962</option>
                <option value="1961">1961</option>
                <option value="1960">1960</option>
                <option value="1959">1959</option>
                <option value="1958">1958</option>
                <option value="1957">1957</option>
                <option value="1956">1956</option>
                <option value="1955">1955</option>
                <option value="1954">1954</option>
                <option value="1953">1953</option>
                <option value="1952">1952</option>
                <option value="1951">1951</option>
                <option value="1950">1950</option>
                <option value="1949">1949</option>
                <option value="1948">1948</option>
                <option value="1947">1947</option>
                <option value="1946">1946</option>
                <option value="1945">1945</option>
                <option value="1944">1944</option>
                <option value="1943">1943</option>
                <option value="1942">1942</option>
                <option value="1941">1941</option>
                <option value="1940">1940</option>
                <option value="1939">1939</option>
                <option value="1938">1938</option>
                <option value="1937">1937</option>
                <option value="1936">1936</option>
                <option value="1935">1935</option>
                <option value="1934">1934</option>
                <option value="1933">1933</option>
                <option value="1932">1932</option>
                <option value="1931">1931</option>
                <option value="1930">1930</option>
                <option value="1929">1929</option>
                <option value="1928">1928</option>
                <option value="1927">1927</option>
                <option value="1926">1926</option>
                <option value="1925">1925</option>
                <option value="1924">1924</option>
                <option value="1923">1923</option>
                <option value="1922">1922</option>
                <option value="1921">1921</option>
                <option value="1920">1920</option>
                <option value="1919">1919</option>
                <option value="1918">1918</option>
                <option value="1917">1917</option>
                <option value="1916">1916</option>
                <option value="1915">1915</option>
                <option value="1914">1914</option>
                <option value="1913">1913</option>
                <option value="1912">1912</option>
                <option value="1911">1911</option>
              </select>
              <select onchange="showbirthday();" name="birthmonth" id="birthmonth">
                <option value="">Month</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
              </select>
              <select name="birthday" id="birthday">
                <option value="">Day</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
                <option value="13">13</option>
                <option value="14">14</option>
                <option value="15">15</option>
                <option value="16">16</option>
                <option value="17">17</option>
                <option value="18">18</option>
                <option value="19">19</option>
                <option value="20">20</option>
                <option value="21">21</option>
                <option value="22">22</option>
                <option value="23">23</option>
                <option value="24">24</option>
                <option value="25">25</option>
                <option value="26">26</option>
                <option value="27">27</option>
                <option value="28">28</option>
                <option value="29">29</option>
                <option value="30">30</option>
                <option value="31">31</option>
              </select>
			</div>
		</td>
		</tr><tr></tr>
		<tr><th>
			<label for="nationality">Nationality:</label>
		</th><td>
			<div  class="right w200">
			<input type="text" name="nationality" id="nationality" />
			</div>
		</td>
		</tr><tr></tr>
		<tr><th>
			<label for="address">Address:</label>
		</th><td>
			<div  class="right w200">
			<select name="address" id="address" />
				<option value="Beijing">Beijing</option>
				<option value="Shanghai">Shanghai</option>
				<option value="Guangzhou">Guangzhou</option>
				<option value="Shenzhen">Shenzhen</option>
				<option value="0">Other</option>
			</select>
			<input name="address2" type="text" id="address2" style="display:none;" />
			Address at present
			</div>
		</td>
		</tr><tr></tr>
		</table>
		<p>
		<input type="checkbox" value="1" name="policy" />By registering I certify that I have <br />read and agreed to the Terms of Service and Privacy Policy.</p>
		<input type="submit" value="Register now" />
	</fieldset>
	</td></tr>
	</table>
	</form>
</div>
<script language="javascript">
	function showbirthday(){
	var el = byid('birthday');
	var birthday = el.value;
	el.length=0;
	el.options.add(new Option('Day', ''));
	for(var i=0;i<28;i++){
		el.options.add(new Option(i+1, i+1));
	}
	if(byid('birthmonth').value!="2"){
		el.options.add(new Option(29, 29));
		el.options.add(new Option(30, 30));
		switch($('birthmonth').value){
			case "1":
			case "3":
			case "5":
			case "7":
			case "8":
			case "10":
			case "12":{
				el.options.add(new Option(31, 31));
			}
		}
	} else if(byid('birthyear').value!="") {
		var nbirthyear=$('birthyear').value;
		if(nbirthyear%400==0 || (nbirthyear%4==0 && nbirthyear%100!=0)) el.options.add(new Option(29, 29));
	}
	el.value = birthday;
}
$(function(){
	$("#username").blur(function(){
		if(this.value!=""){
			var tourl=URL+'/chk_info';
			$.post(tourl,{fld:'username',val:this.value},function(data){
				if(data['status']==1){
					//alert(data['info']);
				}else{
					alert(data['info']);
					$("#username").val('');
					$("#username")[0].focus();
				}
			},'json');
		}
	});
	$("#repassword").blur(function(){
		var repas=this.value;
		var pas=$("#password").val();
		if(repas!=pas){
			alert("Passwords do not match.");
			$("#repassword").val('');
			$("#repassword")[0].focus();
		}
	});
	$("#first_name").focus(function(){
		if(this.value=='First name'){
			this.value='';
		}
	});
	$("#last_name").focus(function(){
		if(this.value=='Last name'){
			this.value='';
		}
	});
	$('#address').focus(function(){
		var v=$('#address').val();
		if(v=='0'){
			$("#address2").show();
		}else{
			$("#address2").hide();
		}
	});
	$('#address').change(function(){
		var v=$('#address').val();
		if(v=='0'){
			$("#address2").show();
		}else{
			$("#address2").hide();
		}
	});
});

function byid(obj){
	return document.getElementById(obj);
}
</script>
<include file="Public:foot" />